<button nz-button nzType="primary" (click)="showNewModal(null)">新增</button>
<!-- <button
  nz-button
  nzType="primary"
  (click)="batchDelete()"
  nzDanger
  [disabled]="selectListSelection.selected.length === 0"
>
  删除
</button> -->
<!-- <button
  nz-button
  nzType="primary"
  (click)="showPermissionModal(null)"
  [disabled]="selectListSelection.selected.length === 0"
>
  批量授权
</button> -->
<nz-table
  #headerTable
  [nzData]="listOfCurrentPageData"
  [nzPageSize]="pageable.size!"
  nzFrontPagination="false"
  [nzScroll]="{ y: 'calc(100vh - 330px)' }"
  [nzPageIndex]="pageable.page!"
  nzServerRender="true"
  [nzTotal]="total!"
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
  (nzPageIndexChange)="onPageIndexChange($event)"
  nzShowPagination
  nzShowSizeChanger
>
  <thead>
    <tr>
      <!-- <th
        nzWidth="60px"
        [nzChecked]="selectListSelection.selected.length>0"
        [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="onAllChecked($event)"
      ></th> -->
      <th>名称</th>
      <th>代码</th>
      <th>授权用户</th>
      <th nzWidth="100px"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of headerTable.data">
      <!-- <td
        [nzChecked]="selectListSelection.isSelected(data)"
        (nzCheckedChange)="onItemChecked(data, $event)"
      ></td> -->
      <td>{{ data.name }}</td>
      <td>{{ data.code }}</td>
      <td>
        <nz-tag
          [nzColor]="'blue'"
          nzMode="closeable"
          *ngFor="let user of data.users"
          (nzOnClose)="onUserRemove(user.id, $event)"
          >{{ user.id.username }}</nz-tag
        >
      </td>
      <td>
        <a nz-tooltip nzTooltipTitle="编辑" (click)="showNewModal(data)"
          ><i nz-icon nzType="edit" nzTheme="outline"></i
        ></a>
        <a
          style="color: red"
          nz-tooltip
          nzTooltipTitle="删除"
          (click)="delete(data)"
          ><i nz-icon nzType="delete" nzTheme="outline"></i
        ></a>
        <a
          nz-tooltip
          nzTooltipTitle="授权用户"
          (click)="showPermissionModal(data)"
          ><i nz-icon nzType="user" nzTheme="outline"></i
        ></a>
      </td>
    </tr>
  </tbody>
</nz-table>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="新增/编辑"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="submitForm()"
>
  <ng-container *nzModalContent>
    <form
      nz-form
      nzLayout="vertical"
      [formGroup]="validateForm"
      (ngSubmit)="submitForm()"
    >
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="" />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>

<nz-modal
  [(nzVisible)]="isPermissionVisible"
  nzTitle="授权"
  (nzOnCancel)="handlePermissionCancel()"
  (nzOnOk)="submitPermissionForm()"
>
  <ng-container *nzModalContent>
    <form nz-form nzLayout="vertical" [formGroup]="validatePermissionForm">
      <nz-tag
        *ngFor="let sysrole of selectListSelection.selected; let i = index"
        nzColor="blue"
      >
        {{ sysrole.name }}
      </nz-tag>
      <nz-form-item>
        <!-- <nz-form-label></nz-form-label> -->
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="请输入用户名" />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>
